<!DOCTYPE html>

<html>
    <head>
        <title>#{get 'title' /}</title>
        <meta charset="${_response_encoding}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/bootstrap.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/eventstyle.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/jquery-ui-1.8.13.custom.css'}">
        #{get 'moreStyles' /}
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/jumping_man_finale2_little2.png'}">
        <script src="@{'/public/javascripts/jquery-1.6.4.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/datepicker.js'}" type="text/javascript" charset="utf-8"></script>
        <script src="@{'/public/javascripts/jquery-ui-1.8.13.custom.min.js'}" type="text/javascript" charset="utf-8"></script>
		<script src="@{'/public/javascripts/dialog.js'}" type="text/javascript" charset="utf-8"></script>
		#{get 'moreScripts' /}
    </head>
    <body data-dateformat="${play.configuration['date.format']}">
    	
   		<header>
				<a href="@{Application.home()}">
				<div id="logo"></div>
				Make your own events and activities
				</a>
		</header>
		<div class="barheader"></div>
		<div class="container">
			<div id="register">
			
	#{form @UserManager.login()}
		#{if flash.error}
			<p class="error">
				&{flash.error}
			</p>
		#{/if}
		#{if flash.success}
			<p class="success">
				&{flash.success}
			</p>
		#{/if}
		<p id="username-field">
			<label for="username">&{'secure.username'}</label>
			<input type="text" name="username" id="username" value="${flash.username}" />
		</p>
		<p id="password-field">
			<label for="password">&{'secure.password'}</label>
			<input type="password" name="password" id="password" value="" />
		</p>
		<p id="remember-field">
			<input type="checkbox" name="remember" id="remember" value="true" ${flash.remember ? 'checked="true"' : ''} />
			<label for="remember">&{'secure.remember'}</label>
		</p>
		<p id="signin-field">
			<input type="submit" id="signin" value="&{'secure.signin'}" />
		</p>
	
	#{/form}
    
    	Not registered?
    		<center>
    			<button type="button"><a href="/register">Register now!</a></button>
    		</center>
			
			</div>
      
      <table class="categories">
       <tr>
          <td>
           <a href="/trips">
           <div class="category">
           <div id="trips">
             <h4>Trips</h4>
           </div>
             <img src="/public/images/events/mountaintrip.jpg" alt="trip" />              
           </div>
           </a>
          </td>
           <td>
           <a href="sports">
          <div class="category">
          <div id="sport">
             <h4>Sport</h4>
           </div>
             <img src="/public/images/events/basketball.jpg" alt="sport" />             
          </div>
          </a>
          </td>
       </tr>
       <tr>
          <td>      
          <a href="/culture">
           <div class="category">
           	<div id="culture">
             <h4>Culture</h4>
            </div>
             <img src="/public/images/events/museum.jpg" alt="culture" />           
           </div>        
          </a> 
          </td>
           <td>
           <a href="/entertainment">
          <div class="category">
           <div id="entertainment">
             <h4>Entertainment</h4>
             </div>
             <img src="/public/images/events/dancing.jpg" alt="entertainment" />               
           </div>
          </a>
          </td>
       </tr>
       <tr>
          <td>
          <a href="/night_life">
          	<div class="category">
          		<div id="nightlife">
            	 <h4>Night Life</h4>
            	</div>
            	<img src="/public/images/events/club.jpg" alt="nigthlife" />             
          	</div>
          </a>
          </td>
           <td>
           <a href="learning">
           <div class="category">
           <div id="learning">
             <h4>Learning</h4>
             </div>
             <img src="/public/images/events/learning.jpg" alt="learning" />           
           </div>
           </a>
          </td>
       </tr>
      </table>
        
 </div>